<template>
    <view class="info">
        <uni-grid :column="2" :highlight="true">
            <uni-grid-item
                v-for="(item, index) in presets"
                :key="index"
                class="item"
                :index="index"
            >
                <view class="grid-item-box" style="background-color: #fff" @click="onClick(item)">
                    <uni-icons :type="item.type" :size="40" :color="item.color" />
                    <text class="text">{{ item.text }}</text>
                </view>
            </uni-grid-item>
        </uni-grid>
    </view>
</template>

<script lang="ts" setup>
    const presets = [
        {
            type: 'wallet-filled',
            color: '#ff6f6f',
            text: '小红书文案',
            content:
                'Please edit the following passage using the Emoji style, which is characterized by captivating headlines, the inclusion of emoticons in each paragraph, and the addition of relevant tags at the end. Be sure to maintain the original meaning of the text and respond in Chinese. Please begin by editing the following text: ',
            describe: '输入你需要描述的东西'
        },
        {
            type: 'staff-filled',
            color: '#8f95f5',
            text: '写作助理',
            describe: '输入需要优化的内容',
            content:
                'As a writing improvement assistant, your task is to improve the spelling, grammar, clarity, concision, and overall readability of the text provided, while breaking down long sentences, reducing repetition, and providing suggestions for improvement. Please provide only the corrected Chinese version of the text and avoid including explanations. Please begin by editing the following text: '
        },
        {
            type: 'notification-filled',
            color: '#7df5f5',
            text: 'AI 医生',
            describe: '输入你的需求',
            content:
                'I want you to act as an AI assisted doctor and respond in Chinese. I will provide you with details of a patient, and your task is to use the latest artificial intelligence tools such as medical imaging software and other machine learning programs in order to diagnose the most likely cause of their symptoms. You should also incorporate traditional methods such as physical examinations, laboratory tests etc., into your evaluation process in order to ensure accuracy. My first request is '
        },
        {
            type: 'medal-filled',
            color: '#8df5c3',
            text: '论文',
            describe: '输入论文标题',
            content:
                'I want you to act as an academician and respond in Chinese. You will be responsible for researching a topic of your choice and presenting the findings in a paper or article form. Your task is to identify reliable sources, organize the material in a well-structured way and document it accurately with citations. My first suggestion request is '
        },
        {
            type: 'gift-filled',
            color: '#d4ffa8',
            text: '内容总结',
            describe: '输入需要总结的内容',
            content:
                'Summarize the following text into 100 words, making it easy to read and comprehend. The summary should be concise, clear, and capture the main points of the text. Avoid using complex sentence structures or technical jargon. Respond in Chinese. Please begin by editing the following text: '
        },
        {
            type: 'location-filled',
            color: '#f6e2bb',
            text: '文章标题生成器',
            describe: '输入你的文章内容',
            content:
                'I want you to act as a title generator for written pieces. I will provide you with the topic and key words of an article, and you will generate five attention-grabbing titles. Please keep the title concise and under 20 words, and ensure that the meaning is maintained. Respond in Chinese. My first topic is '
        }
    ];
    function onClick(item: any) {
        uni.setStorageSync('preset', item.content);
        uni.setStorageSync('describe', item.describe);
        uni.switchTab({
            url: '/pages/chat/chat'
        });
    }
</script>

<style lang="scss" scoped>
    .info {
        padding: 20rpx 20rpx;
    }
    .item {
        background-color: #a5faaf;
    }

    .grid-item-box {
        flex: 1;
        // position: relative;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 15px 0;
    }
</style>
